<template>
  <div>
    <page-scroll :footer="false">
      <template #header>
        <gltitle
            :title="$t('lucky.doc23')"
            :is_name="true"
            :is_back="true"
            :is_lang="false"
            :is_kf="false"
            :is_right="false"
        ></gltitle>
      </template>
      <template #content>
        <div class="container">
          <EmptyData v-show="emptyShow" :text="$t('load.no_data')"/>
          <van-pull-refresh
              v-model="refreshing"
              :success-text="$t('load.refreshed')"
              @refresh="refreshData"
              head-height="50"
              v-if="!emptyShow"
          >

            <van-list
                v-model="loading"
                :finished="finished"
                
                :loading-text="$t('load.loading')"
                @load="loadData"
                :immediate-check="true"
            >
              <div class="record-list">
                <div class="record" v-for="(item,index) in recordList" :key="index">
                  <div class="img">
                    <img :src="item.imgUrl" alt="">
                  </div>
                  <div class="left">
                    <div class="name">{{ item.remark }}</div>
                    <div class="time">{{ item.createTime }}</div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </template>
    </page-scroll>
  </div>
</template>

<script>
import EmptyData from "@/components/public/EmptyData.vue";
import refreshList from "@/mixins/refreshList.js";

export default {
  components: {EmptyData},
  mixins: [refreshList],
  data() {
    return {
      emptyShow: false,
      recordList: []
    }
  },
  created() {
    this.firstEnter = true
  },
  activated() {
    if (this.firstEnter) {
      return this.firstEnter = false
    }
    this.onTab()
  },
  methods: {
    async getRecordList() {
      let url = this.URL.lucky.record
      let {page, pageSize} = this
      let params = {page, pageSize}

      let {data, code, message} = await this.$post(url, params).catch((err) => {
        this.$toast(err.message)
        this.emptyShow = this.recordList.length == 0
      });
      if(code==1005){
        setTimeout(() => {
          this.getRecordList()
        },500)
        return ;
      }
      if (code != 0) return this.$toast(message);

      this.recordList.push(...data.list)
      this.emptyShow = this.recordList.length == 0
      this.judgement(data.list.length, data.page.totalPage)
    },
    /**
     * 继续加载数据列表
     */
    loadData() {
      this.getRecordList()
    },
    /**
     * 重新加载页面
     */
    refreshData() {
      this.refreshInit()
      this.recordList = []
      this.getRecordList()
    },
    onTab() {
      this.initData()
      this.recordList = []
      this.getRecordList()
    }
  }
}
</script>

<style lang="less" scoped>


.record-list {
  .record {
    margin-top: .24rem;
  padding: .36rem .52rem;
    display: flex;
    align-items: center;
    background: #1B202D;
    border-radius: .2rem;
    .img {
      height: .72rem;
      margin-right: .32rem;
    }

    .left {
      .name {
        color: #fff;
      }

      .time {
        margin-top: .14rem;
        color: #BDBDBD;
        font-size: .24rem;
      }
    }

  }
}
</style>


















